<script setup>
// 天猫热榜Pane
import axios from 'axios'
import MobileDetail from '~/contentScripts/views/tao/detail/components/tool/mobileDetail.vue'

const props = defineProps([
  'date', 'rankId',
])
const columns = [
  {
    title: '排名',
    dataIndex: 'recommend_index',
    sorter: (a, b) => a.recommend_index - b.recommend_index,
    defaultSortOrder: 'ascend',
    width: 80,
    align: 'center',
  },
  {
    title: '商品',
    dataIndex: 'item',
  },
  {
    title: '指数',
    dataIndex: 'recommend_must_buy_index',
    width: 60,
    align: 'center',
    sorter: (a, b) => a.recommend_must_buy_index - b.recommend_must_buy_index,
  },
  {
    title: '一口价',
    dataIndex: 'price',
    align: 'center',
    width: 120,
    sorter: (a, b) => a.item_price_area.price - b.item_price_area.price,
  },
  {
    title: '推荐理由',
    dataIndex: 'recommend_reason',
    width: 300,
  },
  {
    title: '首次上榜',
    dataIndex: 'first_rank_date',
    align: 'center',
    width: 120,
    sorter: (a, b) => (a.first_rank_date) - b.first_rank_date,
  },
  // {
  //   title: '指数',
  //   dataIndex: 'recommend_must_buy_index',
  //   width: 60,
  //   sorter: (a, b) => a.recommend_must_buy_index - b.recommend_must_buy_index,
  //   align: 'center',
  // },
  // {
  //   title: '销量描述',
  //   dataIndex: 'recommend_item_rank_des',
  //   width: 200,
  // },
  {
    title: '查看',
    dataIndex: 'action',
    width: 100,
    align: 'center',
  },
]
const loading = ref(false)
const data = ref([])
const loadData = () => {
  loading.value = true
  const date = props.date
  const rank_id = props.rankId
  axios.get('/Hot/TmRecommends', {
    params: {
      date: date.format('YYYY-MM-DD'),
      rank_id,
    },
  }).then((res) => {
    data.value = res.data.data
    loading.value = false
  })
}
loadData()
watch(() => props, () => {
  loadData()
}, { deep: true })
</script>

<template>
  <a-table
    :columns="columns" :data-source="data" size="small" :scroll="{
      y: 500,
    }" :pagination="false"
    :loading="loading"
  >
    <template #bodyCell="{ column, record }">
      <template v-if="column.dataIndex === 'item'">
        <div>
          <a-row type="flex" style="max-width: 560px;">
            <a-col style="padding-right: 10px">
              <a-image :src="record.item_img" style="width: 30px; height: 30px;" />
            </a-col>
            <a-col flex="1" style="overflow: hidden;">
              <a-button style="width: 100%;text-overflow:ellipsis;text-align: left;" type="link" size="small" :href="`${record.item_url}`" target="_blank">
                {{ record.item_name }}
              </a-button>
            </a-col>
          </a-row>
        </div>
      </template>
      <template v-else-if="column.dataIndex === 'price'">
        ¥{{ record.item_price_area.price }}
      </template>
      <template v-else-if="column.dataIndex === 'action'">
        <a-row type="flex">
          <a-col flex="1" style="text-align: center">
            <MobileDetail :link="record.item_url" title="手淘详情">
              <a-button type="link" size="small">
                手淘
              </a-button>
            </MobileDetail>
          </a-col>
          <a-col flex="1" style="text-align: center">
            <a-button type="link" size="small" :href="`https://detail.tmall.com/item.htm?id=${record.item_id}`" target="_blank">
              PC
            </a-button>
          </a-col>
        </a-row>
      </template>
    </template>
  </a-table>
</template>

<style scoped>

</style>
